<template>
    <div v-if="user.userRole === 2" style="padding: 10px;margin-left: 50px;margin-top: 20px;margin-bottom: 80px;">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>
                        <el-tooltip placement="top">
                            <template #content> 已完成校园认证 </template>
                            <el-icon class="head-icon"><CircleCheck /></el-icon>
                        </el-tooltip>
                        认证信息
                    </span>
                </div>
            </template>
            <div class="text item">
                <span style="margin-right: 23px;">高校名：</span>
                {{ campus.collegeName }}
            </div>
            <div class="text item">
                <span style="margin-right: 38px;">学号：</span>
                {{ campus.studentNumber }}
            </div>
            <div class="text item">
                <span style="margin-right: 10px;">真实姓名：</span>
                {{ campus.realName }}
            </div>
            <div class="text item">
                <span style="margin-right: 10px;">认证时间：</span>
                {{ formatterDate(campus.createTime) }}
            </div>
        </el-card>
    </div>
    <el-form v-else :model="campusForm" label-width="100px" style="padding: 10px;margin-top: 20px;margin-bottom: 50px;margin-left: 50px;">
        <el-form-item label="所在高校" required>
            <el-select v-model="campusForm.collegeId" class="campus-input" placeholder="请选择学校">
                <el-option v-for="item in collegeOptions" :label="item.collegeName" :value="item.collegeId" />
            </el-select>
        </el-form-item>
        <el-form-item label="学号" required>
            <el-input class="campus-input" v-model="campusForm.studentNumber" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" required>
            <el-input class="campus-input" v-model="campusForm.realName" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item class="campus-button">
            <el-button type="primary" @click="onCampus()">认证</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { useCollegeListApi } from '@/api/college/college';
import { useCampusViewApi } from '@/api/user/campus'
import store from '@/stores';
import { ElMessage } from 'element-plus';
import { CircleCheck } from '@element-plus/icons-vue';
import { ref, reactive, computed, onMounted } from 'vue';
import { useRequest } from 'vue-request';
import { useRoute, useRouter } from 'vue-router';
import { formatterDate } from '@/util/dateFormat';

const route = useRoute()
const router = useRouter()

const campusForm = reactive({
    collegeId: '',
    studentNumber: '',
    realName: '',
    userId: ''
})
const campus = reactive({
    collegeId: '',
    collegeName: '',
    studentNumber: '',
    realName: '',
    userId: '',
    createTime: ''
})
const user = store.useUserStore.user

const { data } = useRequest(useCollegeListApi())
const collegeOptions = computed(() => {
    return data.value?.data || []
})

onMounted(async () => {
    // 如果用户是学生，获取用户校园认证信息
    if (user.userRole === 2) {
        await useCampusViewApi(reactive({ userId: user.userId }))
            .then((res) => {
                Object.assign(campus, res.data)
            })
    }
})

const onCampus = async () => {
    campusForm.userId = user.userId
    store.useUserStore.campusCheckAction(campusForm)
        .then(() => {
            ElMessage({
                message: '认证成功',
                type: 'success'
            })
            refresh()
        })
}

function refresh() {
    // 刷新当前路由
    const { fullPath } = route
    router.replace({
        path: '/redirect' + fullPath
    })
}

</script>

<style scoped lang="scss">
.campus-input {
    width: 200px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 300px;
}
.head-icon {
    font-size: 25px;
    color: greenyellow;
    position: relative;
    top: 6px;
}
</style>